<template>
  <div>
        <el-button type="primary" @click="add">添加</el-button>
        <el-table v-loading="loading" :data="dropdownkey" @selection-change="handleSelectionChange">
          <el-table-column label="ID" align="center" prop="id"/>
          <el-table-column label="Key" align="center" prop="zkey"/>
          <el-table-column label="Value" align="center" prop="value"/>
          <el-table-column
              prop="status"
              label="状态">
            <!--template:模板 自定义展示内容-->
            <template slot-scope="scope">
              {{scope.row.status===1?'正常中':'禁用中'}}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="beizhu"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-share"
                  @click="xiang(scope.row)"
              >详细</el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-share"
                  @click="xiu(scope.row)"
              >修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="中文Key" prop="zkey">
              <el-input v-model="form.zkey"/>
            </el-form-item>
            <el-form-item label="英文Key" prop="ekey">
              <el-input v-model="form.ekey"/>
            </el-form-item>
            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="form.beizhu"/>
            </el-form-item>
            <div>
              <el-button type="primary" @click="xiugai">修改</el-button>
              <el-button @click="cancel">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="中文Key" prop="zkey">
              <el-input v-model="form.zkey"/>
            </el-form-item>
            <el-form-item label="英文Key" prop="ekey">
              <el-input v-model="form.ekey"/>
            </el-form-item>
            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="form.beizhu"/>
            </el-form-item>
            <div>
              <el-button type="primary" @click="tianjia">添加</el-button>
              <el-button @click="cancel">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-dialog :title="title2" :visible.sync="open2" width="500px" append-to-body>
          <el-button type="primary" @click="add1">添加</el-button>
          <el-table v-loading="loading" :data="dropdownvalue" @selection-change="handleSelectionChange">
            <el-table-column label="排序" align="center" prop="paixu"/>
            <el-table-column label="中午Value" align="center" prop="value"/>
            <el-table-column label="英文Value" align="center" prop="evalue"/>
            <el-table-column
                prop="status"
                label="状态">
              <!--template:模板 自定义展示内容-->
              <template slot-scope="scope">
                {{scope.row.status===1?'启用':'不用'}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-share"
                    @click="xiu1(scope.row)"
                >修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog :title="title3" :visible.sync="open3" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="中文Value" prop="value">
              <el-input v-model="form.value"/>
            </el-form-item>
            <el-form-item label="英文Value" prop="evalue">
              <el-input v-model="form.evalue"/>
            </el-form-item>
            <el-form-item label="排序号" prop="paixu">
              <el-input v-model="form.paixu"/>
            </el-form-item>
            <el-radio-group  v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
            <div>
              <el-button type="primary" @click="tianjia1">添加</el-button>
              <el-button @click="cancell">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-dialog :title="title4" :visible.sync="open4" width="500px" append-to-body>
          <el-form ref="form" :v-model="yu" :rules="rules" label-width="80px">
            <el-form-item label="中文Value" prop="value">
              <el-input v-model="value"/>
            </el-form-item>
            <el-form-item label="英文Value" prop="evalue">
              <el-input v-model="evalue"/>
            </el-form-item>
            <el-form-item label="排序号" prop="paixu">
              <el-input v-model="paixu"/>
            </el-form-item>
            <el-radio-group  v-model="status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
            <div>
              <el-button type="primary" @click="xiugai1">修改</el-button>
              <el-button @click="cancelf">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tid:null,
      title: "key页面",
      title1: "key添加页面",
      title2: "value页面",
      title3: "value页面",
      title4: "value修改页面",
      title5: "value添加页面",
      open:false,
      open1:false,
      open2:false,
      open3:false,
      open4:false,
      open5:false,
      loading:true,
      dropdownkey:[],
      dropdownvalue:[],
      dropdownvalues:[],
      yu:{},
      qu:{},
      id:null,
      zifu:null,
      zkey:null,
      ekey:null,
      value:null,
      uu:"",
      status:null,
      beizhu:null,
      evalue:null,
      paixu:null,
      did:null,
      form:{},
      rules:{},
      activeIndex: '11',
      name: sessionStorage.getItem("name"),
    };
  },
  created() {
    this.cha();
  },
  methods: {
    cancell(){
      this.open3=false;
    },
    add1(){
    this.form={};
    this.open3=true;
    },
    cancelf(){
      this.open4=false;
    },
    nulls(){
      this.id=null;
          this.zkey=null;
          this.ekey=null;
          this.value=null;
          this.status=null;
          this.beizhu=null;
          this.evalue=null;
          this.paixu=null;
          this.did=null;
    },
    tianjia1(){
      this.form.did=this.did;

      console.log(this.form)
      axios.post("http://localhost:10062/system/tianjia1",this.form).then(res =>{
        console.log(res);
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.open3=false;
          this.cha();
      })
       },
    xiugai1(){
      this.yu.did=this.did;
      this.yu.id=this.id;
      this.yu.value=this.value;
      this.yu.evalue=this.evalue;
      this.yu.paixu=this.paixu;
      this.yu.status=this.status;
      console.log(this.yu);
      axios.post("http://localhost:10062/system/xiugai1",this.yu).then(res =>{
        console.log(res);
        console.log(this.qu);
          this.$message({
            message: '修改成功',
            type: 'success'
          });
      })
      window.location.reload();
      this.cha();
      window.location.reload();
      this.open=false;
      window.location.reload();
      this.open1=false;
      window.location.reload();
      this.open2=false;
      window.location.reload();
      this.open3=false;
      window.location.reload();
      this.open4=false;
      window.location.reload();
      location.reload();
      this.$router.go(0)
      this.cha();
    },
    xiu1(data){

      this.evalue=data.evalue;
      this.id=data.id;
      this.paixu=data.paixu;
      this.status=data.status;
      this.value=data.value;
      console.log(this.yu);
      this.open4=true;
    },
    xiugai(){
      axios.post("http://localhost:10062/system/xiugai",this.form).then(res =>{
        console.log(res);
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.open=false;
          this.cha();
      })
    },
    tianjia(){
      for (let i = 0; i < this.dropdownvalue.length; i++) {
       var uu= this.dropdownvalue[i].value+",";
      }
      console.log(uu);
      this.form.value=uu;
      axios.post("http://localhost:10062/system/tianjia",this.form).then(res =>{
        console.log(res);
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.open1=false;
          this.cha();
      })
    },
    cancel(){
      this.open=false;
      this.open1=false;
      this.open2=false;
      this.open3=false;
      this.open4=false;
    },
    submitForm(){},

    add(){
       this.form={};
      this.open1=true;
    },
    xiu(data){
      this.tid=data.id;
      this.form=data;
      this.open=true;
    },

    cha(){
      this.loading=true;
      axios.post("http://localhost:10062/system/kan5").then(res =>{
        this.dropdownkey=res.data;
        this.loading=false;
      })
    },

    expressList(){
      this.$router.push(
          {path: "/expressList"}
      )
    },

    xiang(data){
      this.qu=data;
      this.did=data.id;
      this.dropdownvalue=data.dropdownvalues;
      this.open2=true;
    },
    notice() {
      this.$router.push(
          {path: "/HomePage"}
      )
    },
    xitong(){
      this.$router.push(
          {path: "/OutSystems"}
      )
    },
    baocc(){
      this.$router.push(
          {path: "/OutPackage"}
      )
    },
    ba(){
      this.$router.push(
          {path: "/dropdown"}
      )
    },
    dshezhi(){
      this.$router.push(
          {path: "/outkey"}
      )
    },
    handleSelect(key) {
      console.log(key);
    },

    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    //跳转其他页面
    other() {
      this.$router.push(
          {path: "/otherView"}
      )
    }
  }
};
</script>

<style lang="less">
#app {
  margin-top: 0;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #545c64;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
  align-items: center; //元素上下居中（防止右边按钮贴上下边）
  color: #fff;
  font-size: 18px;

  > div {
    //内嵌的div样式
    display: flex;
    align-items: center; //Logo和文字上下居中
    #fontLogo {
      width: 200px;
      margin-left: 10px; //文字左侧设置间距，防止与Logo紧贴
    }
    #fontName {
      width: 120px;
      margin-right: 10px;
    }
  }
}

#indexMenu {
  width: 100%;
}

.el-menu {
  background-color: #545c64;
}

.el-aside {
  background-color: #545c64;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

.el-main {
  background-color: #eaedf1;
  height: 1000px;
}
</style>
